
<template>
  <main>
    <h1>我是Home组件</h1>
    <Child />
  </main>
</template>

<script>
  import Child from '../components/Child.vue'

  //Vue3的组合式api 只有在setup中才可以使用
  import { onMounted,onBeforeMount,onBeforeUpdate,onUpdated,onUnmounted,onBeforeUnmount } from 'vue'
  export default{

    //Vue3中 选项式和组合式生命周期钩子函数 可以同时设置,但是组合式的优先级高, 先执行.

    //Vue3中 选项式api 的组件生命周期钩子函数中 卸载期的钩子函数变成了beforeUnmount和unmounted

    beforeCreate(){},//实例化期
    created(){},
    beforeMount(){},//挂载期
    mounted(){
      console.log('选项式 mounted');
    },
    beforeUpdate(){},//更新期
    updated(){},
    beforeUnmount(){},//卸载期的钩子函数
    unmounted(){},

    // beforeDestroy(){},
    // destroyed(){},
    components:{ //注册局部组件
      Child
    }, 
    setup(){

      // Vue3中 组合式api 的组件生命周期钩子函数, 原先的beforeCreate和created 被setup替换了.
      onBeforeMount(()=>{}) //挂载期
      onMounted(()=>{
        console.log('组合式 onMounted');
        //在这里发送ajax请求,创建定时器,设置监听
      })
      onBeforeUpdate(()=>{}) //更新期
      onUpdated(()=>{}) 
      onBeforeUnmount(()=>{//卸载期的钩子函数
        //在这里取消ajax请求,销毁定时器,取消监听
      }) 
      onUnmounted(()=>{})

    }
  }
</script>